<template>
  <div class="skp-map-comp-container" id="skpMapComp" :ref="mapRef"></div>
</template>

<script>
// import { Map, View } from 'ol';
// import TileLayer from 'ol/layer/Tile';
// import XYZ from 'ol/source/XYZ';

export default {
  name: 'keyMapComp',
  data() {
    return {
      mapApp: null,
      mapRef: `map${this.$getRandomNum()}`
    };
  },
  mounted() {
    // this.initMap();
  },
  methods: {
    // 初始化地图
    initMap() {
      /* eslint-disable */
      const token = 'ebbfd0ea032ff7f43004fdbe059fe4cf';
      new Map({
        target: 'skpMapComp',
        layers: [
          new TileLayer({
            source: new XYZ({
              // url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png',
              url: 'http://t0.tianditu.gov.cn/vec_c/wmts?tk=ebbfd0ea032ff7f43004fdbe059fe4cf' + token
            })
          })
        ],
        view: new View({
          center: [116.40969, 39.89945],
          zoom: 14
        })
      });

      // var map = new ol.Map({
      //   target: 'skpMapComp',
      //   layers: [
      //     new ol.layer.Tile({
      //       source: new ol.source.XYZ({
      //         url: 'http://t0.tianditu.gov.cn/vec_c/wmts?tk=' + token
      //       }),
      //       isGroup: true,
      //       name: '天地图路网'
      //     }),
      //     new ol.layer.Tile({
      //       source: new ol.source.XYZ({
      //         url: 'http://t0.tianditu.gov.cn/img_c/wmts?tk=' + token
      //       }),
      //       isGroup: true,
      //       name: '天地图文字标注'
      //     })
      //   ],
      //
      //   view: new ol.View({
      //     center: center,
      //     zoom: 14
      //   })
      // });
    }
  }
};
</script>

<style scoped lang="scss">
  .skp-map-comp-container {
    width: 100%;
    height: 100%;
  }
</style>
